<template>
  <a-modal v-if="visible" :footer="false" v-model:visible="visible" width="800px">
    <a-card>
      <a-form :model="form" ref="formRef" @submit-success="submit" :rules="rules">
        <a-form-item field="name" label="名称">
          <a-input allow-clear v-model="form.name"></a-input>
        </a-form-item>
        <a-row>
          <a-col :offset="4">
            <a-button type="primary" htmlType="submit">{{ t["确定"] }}</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </a-modal>
</template>

<script setup lang="ts">
import { FieldRule } from "@arco-design/web-vue";

const visible = defineModel<boolean>();
const t = translate("公共模块");
const emit = defineEmits(["submit"]);
const formRef = ref();
const form = ref({
  name: "初始值"
});
const reset = () => {
  formRef.value?.resetFields();
};
onMounted(() => {
  reset();
});

const submit = () => {
  reset();
  visible.value = false;
  emit("submit");
};

const rules: Record<string, FieldRule[]> = {
  name: [{ required: true, message: "请输入名称" }]
};
</script>

<style lang="scss" scoped></style>
